<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='商品分类管理',active='cate'">
<head th:replace="/manage/header::headerFragment(title,active)"></head>
<body>
<div th:replace="/manage/header::header-body"></div>
<div class="row">
    <div class="col-2">
        <div th:replace="/manage/leftnav::leftnav"></div>
    </div>
    <div class="col-10 content-page">
        <div class="row" style="padding: 20px 0 0 40px">
        <button  type="button" class="btn btn-primary col-2" data-bs-toggle="modal" data-bs-target="#addModal">
            新增分类
        </button>
        </div>
       <div class="row" style="padding-left: 20px">

           <div class="col-md-2" th:each="cate:${catelist.list} ">
               <div class="card text-dark bg-light m-3" >
                   <div class="card-header" th:text="${cate.cate_name}"></div>
                   <img class="card-img-top"  th:src="@{${cate.cate_pic}}" alt="Card image" style="height:80%;width:100%">
                   <div class="card-body">
                       <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#updateModal"
                               th:data-id="${cate.cate_id}" th:data-name="${cate.cate_name}" th:data-pic="${cate.cate_pic}"
                               onclick= "getCateInfo(this.getAttribute('data-id'),this.getAttribute('data-name'),this.getAttribute('data-pic'))">
                           修改
                       </button>
                       <a th:href="@{'deleteCate/'+${cate.cate_id}}"  class="btn btn-primary">删除</a>
                   </div>
               </div>
           </div>
       </div>
        <!-- 文章分页信息 -->
        <div class="row">
            <div th:replace="common/paging :: pageAdminNav(${catelist})"></div>
        </div>
    </div>

</div>

<form id="edit_cate_form" enctype="multipart/form-data" method="post">
<!-- 修改分类模态框 -->
<div class="modal" id="updateModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">修改商品分类</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- 模态框内容 -->
            <div class="modal-body">
                        <input type="hidden" class="form-control" id="cate_id" name="cate_id">
                    <div class="mb-3 mt-3">
                        <label for="cate_name" class="form-label">分类名称</label>
                        <input type="text" class="form-control" id="cate_name" placeholder="分类名称" name="cate_name">
                    </div>
                    <div class="mb-3">
                        <label for="cate_pic" class="form-label">分类图片:</label>
                        <input type="file" class="form-control" id="cate_pic" placeholder="分类图片" name="uploadfile">
                    </div>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="updateCate()">提交</button>
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
            </div>

        </div>
    </div>
</div>
</form>

<form id="add_form" class="was-validated" enctype="multipart/form-data" method="post">
    <!-- 新增分类模态框 -->
    <div class="modal" id="addModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">新增商品分类</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- 模态框内容 -->
                <div class="modal-body">
                    <input type="hidden" class="form-control"  name="cate_id">
                    <div class="mb-3 mt-3">
                        <label for="cate_name" class="form-label">分类名称</label>
                        <input type="text" class="form-control" placeholder="分类名称" name="cate_name" id="catename" required>
                        <div class="invalid-feedback">请输入分类名称</div>
                    </div>
                    <div class="mb-3">
                        <label for="cate_pic" class="form-label">分类图片:</label>
                        <input type="file" class="form-control" name="uploadfile" id="catepic" required>
                        <div class="invalid-feedback">请上传分类图片</div>
                    </div>
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" onclick="addCate()">提交</button>
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
                </div>

            </div>
        </div>
    </div>
</form>
<script th:inline="javascript">
    // 通过id获取修改的商品信息
    function getCateInfo(id,name,pic) {
        $("#cate_id").val(id);
        $("#cate_name").val(name);
        }

    // 修改商品分类
    function updateCate() {
        $.ajax({
            url:"updateCate",
            type: "POST",//方法类型
            cache : false,
            processData: false,
            contentType: false,
            dataType:"json",
            data: new FormData($('#edit_cate_form')[0]),
            success: function(data){
                // alert(data);
                if(data.result=="success"){
                    alert(data.msg);
                    window.location.reload();
                }else{
                    alert(data.msg);
                }
            },error:function(xhr,status,error){
                alert("请求失败!"+status);
            }
        });
/*        $.post("updateCate",$("#edit_cate_form").serialize(),function(data){
            // alert("----")
            if(data =="OK"){
                alert("商品分类信息更新成功！");
                window.location.reload();
            }else{
                alert("商品分类信息更新失败！");
                window.location.reload();
            }
        });*/
    }

    /*新增商品分类
    * 使用formData数据格式提交form表单数据，该格式主要针对input=file，上传文件时使用。
    * 如何ajax提交数据未formData格式，必须定义以下两个参数值。 processData: false 表示不使用applicati/x-www-form-urlencode。
    * contentType: false 表示不采用默认的数据类型
    */
    function addCate() {
        $.ajax({
            url:"addCate",
            type: "POST",//方法类型
            cache : false,
            processData: false,
            contentType: false,
            dataType:"json",
            data: new FormData($('#add_form')[0]),
            success: function(data){
               // alert(data);
                if(data.result=="success"){
                    alert(data.msg);
                    window.location.reload();
                }else{
                    alert(data.msg);
                }
            },error:function(xhr,status,error){
                alert("请求失败!"+status);
            }
        });
    }

</script>
<div th:replace="/manage/footer::footer"></div>
</body>
</html>